昨天正式認識了 Grid。

結果今天第一個問題馬上就來了：

既然前面已經有 Flexbox，那我到底什麼時候要用 Grid？

不然以前我的排版邏輯大概就是：

先 display: flex;

不行再說 XD

所以今天就把兩個放在一起看一下。

先拿一樣的東西來試

今天準備六個熟悉的方塊：
html:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

先用 Flexbox：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

flex-wrap: wrap; 可以讓空間不夠的元素自動換到下一排。

所以 Flexbox 給我的感覺比較像：
「你們先排隊，站不下的自己去下一排。」

換 Grid 看看
同樣六個方塊，

這次換成：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

這樣就直接分成三欄：

[1] [2] [3]

[4] [5] [6]

Grid 的感覺就比較像：
「座位表我先畫好了，大家照格子坐。」

這樣一比突然就滿明顯了。
Flexbox 比較像「排一條」

如果今天的畫面是：

Logo     首頁     文章     關於我

這種主要就是「橫著排」，

Flexbox 就滿直覺的。

例如：

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

除了橫著排，也可以用：

flex-direction: column;

變成直的。

所以我現在會先把 Flexbox 想成：
主要處理一個方向的排列。

Grid 比較像「直接畫格子」
如果今天畫面本來就長這樣：

□ □ □
□ □ □

有列又有欄，
Grid 就會比較直覺。

例如商品卡片：

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

三欄直接切好。

不用再一直想：
這張卡到底要多寬？
下一排什麼時候掉下去？

Grid：
我格子都畫好了，你站好就好。
所以到底誰比較好？
看到這裡才發現，

其實不是：Flexbox VS Grid，誰贏？

而是：

現在這個版面比較適合誰？

像外面的卡片區可以用 Grid：

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

但卡片裡面的內容又可以用 Flexbox：

.card {
  display: flex;
  flex-direction: column;
}

所以兩個其實完全可以一起用。

今天先這樣記 :

我目前會先用一個很簡單的方法判斷：

一個方向的排列 → 先想到 Flexbox
同時要處理列跟欄 → 先想到 Grid

當然不是絕對，

但至少下次排版的時候，
不會再什麼都先：

display: flex;

然後祈禱它自己會好 XD

今天算是終於知道，
Flexbox 跟 Grid 不是競爭對手，
比較像是不同部門的同事。

該誰上班，就叫誰上班。

Day 10，完成！